<template>
   <div class="cotainer">
     <div class="box">
       <div class="title">21克市集</div>
       <div class="steps">
         <div class="step"><span :class="status=='one' ? 'active' : '' ">注册店铺</span></div>
         <div class="step"><span :class="status=='two' ? 'active' : '' ">个人信息</span></div>
         <div class="step"><span :class="status=='three' ? 'active' : '' ">提供页面</span></div>
       </div>
       <div class="from-box register-from" v-if="status == 'one'">
         <el-form :model="ruleForm" :rules="rules"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="店铺名：" prop="shop_name">
              <el-input v-model="ruleForm.shop_name"></el-input>
            </el-form-item>
            <el-form-item label="店铺类型" prop="shop_type">
              <el-select v-model="ruleForm.shop_type" placeholder="请选择活动区域" class="selectrei" >
                <el-option :label="shop.name" :value="shop.id" v-for="(shop,index) in shopList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
            <el-form-item label="电话：" prop="phone">
              <el-input v-model="ruleForm.phone"></el-input>
            </el-form-item>
            <el-form-item label="短信验证码：" prop="checkData">
               <el-input v-model="ruleForm.checkData" style="width:160px;float:left;" ></el-input>
              <el-button  class="butn" @click="getCode" :disabled="valicodeIsDisable">{{ valicodetext}}</el-button >
            </el-form-item>
             <el-form-item label="密码:" prop="password">
              <el-input type='password' v-model="ruleForm.password"></el-input>
            </el-form-item>
             <el-form-item label="确认密码：" prop="repassword">
              <el-input type='password' v-model="ruleForm.repassword"></el-input>
            </el-form-item>
            <div class="select-x" >
                <el-checkbox v-model="checked" @change="getMessage">同意买家入驻协议</el-checkbox>
            </div>
              <div class="next" @click="submitFormOne('ruleForm')">下一步</div>
          </el-form>
       </div>
        <div class="from-box register-from" v-else-if="status == 'two'">
         <el-form :model="ruleForm2" :rules="rules2"  ref="ruleForm2"    label-width="100px" class="demo-ruleForm">
            <el-form-item label="店主姓名："  prop="realName">
              <el-input v-model="ruleForm2.realName"></el-input>
            </el-form-item>
            <el-form-item label="主营业务" prop="majorBusiness">
               <el-input v-model="ruleForm2.majorBusiness"></el-input>
            </el-form-item>
            <el-form-item label="身份证：" prop="cardNum">
              <el-input v-model="ruleForm2.cardNum"></el-input>
            </el-form-item>
            <el-form-item label="所属学校" prop="schoolId">
              <el-select v-model="ruleForm2.schoolId" placeholder="请选择活动区域" class="selectrei">
                <el-option :label="school.name" :value="school.id" v-for="(school,index) in schoolList" :key="index"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item> 
              <div class="next" @click="submitFormTwo('ruleForm2')">下一步</div>
          </el-form>
       </div>
       <div class="from-boximg register-from"  v-else-if="status == 'three'" >   
         <!-- -->
         <el-form :model="ruleForm3" :rules="rules3"  ref="ruleForm3"   class="demo-ruleForm clearfix">
          <el-form-item type="file" prop="cardFrontImg" class="fromImg" >
            <div class="listimageBox">
              <div class="imgbox" >
                  <input class="inpFile" type="file" id="uimg1" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue1(uploadImg('#uimg1','#imgbox1'))" />
                   <img src="http://www.chenyekeji.com/21market/img/img1.jpg" class="imgpo" id="imgbox1"/>
              </div>
              <div id="logo" style="height:100%">身份证正面</div>
                <el-input v-show="false" v-model="ruleForm3.cardFrontImg"></el-input>
            </div>
            </el-form-item>
            <el-form-item type="file" prop="cardBackImg" class="fromImg" >
            <div class="listimageBox">
              <div class="imgbox" >
                 <img src="http://www.chenyekeji.com/21market/img/img1.jpg" class="imgpo" id="imgbox2"/>
                 <input class="inpFile" type="file" id="uimg2" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue2(uploadImg('#uimg2','#imgbox2'))" />
               </div>
               <div id="logo" style="height:100%">身份证背面</div>
               <el-input v-show="false" v-model="ruleForm3.cardBackImg"></el-input>
            </div>
            </el-form-item>
            <el-form-item type="file" prop="cardHanderImg" class="fromImg">
              <div class="listimageBox">
                <div class="imgbox" >
                  <img src="http://www.chenyekeji.com/21market/img/img1.jpg" class="imgpo" id="imgbox3"/>
                  <input class="inpFile" type="file" id="uimg3" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue3(uploadImg('#uimg3','#imgbox3'))" />
                  
                </div>
                <div id="logo" style="height:100%">手持身份证</div>
                  <el-input v-show="false" v-model="ruleForm3.cardHanderImg"></el-input>
              </div>
            </el-form-item>
            <el-form-item type="file" prop="businessLicense" class="fromImg">
              <div class="listimageBox">
                <div class="imgbox" >
                  <img src="http://www.chenyekeji.com/21market/img/img1.jpg" class="imgpo" id="imgbox4"/>
                  <input class="inpFile" type="file" id="uimg4" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue4(uploadImg('#uimg4','#imgbox4'))" />
                    
                </div>
                <div id="logo" style="height:100%">营业执照／资质资料</div>
                <el-input v-show="false" v-model="ruleForm3.businessLicense"></el-input>
              </div>

            </el-form-item>
            
         </el-form>
         <div class="next" @click="submitFormThree('ruleForm3')">提交</div>
       </div>
     </div>
      <agreeMent v-show="showMess"
      v-on:closemessage='closeMea'
           />
   </div>    
</template>
<script>
import Vue from 'vue';
import agreeMent from '../../../components/page/agreement'
export default {
  components:{

agreeMent
},
   data(){
    return{
      submitFlag: true,
      ruleForm3:{
        cardFrontImg:"",  
        cardBackImg:"",  
        cardHanderImg:"",
        businessLicense:"",
      },
      showMess:false,
      rules3:{
        cardFrontImg:[
            { required: true, message: '请上传身份证正面照片', trigger: 'blur' }
        ],
        cardBackImg:[
            { required: true, message: '请上传身份证背面照片', trigger: 'blur' }
        ],
        cardHanderImg:[
           { required: true, message: '请上传手持身份证正面照片', trigger: 'blur' },
        ],
        businessLicense:[
             { required: true, message: '请上传营业执照／资质资料', trigger: 'blur'},
        ],
      },
      ruleForm2:{
        realName:"",  //店主姓名
        majorBusiness:"",  //主营业务   
        cardNum:"",
        schoolId:"",
      },
      rules2:{
        realName:[
            { required: true, message: '请输入店主姓名', trigger: 'blur' }
        ],
        majorBusiness:[
            { required: true, message: '请输入主营业务', trigger: 'blur' }
        ],
        cardNum:[
           { required: true, message: '请输入身份证号码', trigger: 'blur' },
           {validator: this.$valid.getIdentitycardValidator() , trigger: 'blur'},
        ],
        schoolId:[
             { required: true, message: '请选择所属学校', trigger: 'change' },
        ],
      },
      ruleForm:{
        shop_name:"",  //店铺名
        shop_type:'',  //店铺类型
        email:"",      //邮箱
        phone:"",      //手机号码
        checkData:"", //验证码
        password:'',    //密码
        repassword:'',    //确认密码
      },
      rules:{
        shop_name:[
            { required: true, message: '请输入店铺名', trigger: 'blur' }
        ],
        shop_type:[
            { required: true, message: '请选择店铺类型', trigger: 'change' }
        ],
        email:[
           { required: true, message: '请输入邮箱', trigger: 'blur' },
           {validator: this.$valid.getEmailValidator() , trigger: 'blur'},
        ],
        phone:[
             { required: true, message: '请输入手机号', trigger: 'blur' },
              {required: true,validator: this.$valid.getPhoneValidator(), trigger: 'blur'}
        ],
        checkData:[
           { required: true, validator: this.sureCode, trigger: 'blur' },
        ],
        password:[
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur' }
        ],
         repassword: { validator:this.surePass, trigger: 'blur' }
      },
      shopList:"",
      schoolList:'',
      valicodetext:'获取验证码',
      checked:false,
      valicodeIsDisable:false,   //验证码按钮
      validtime:60,   //时间,
      status:"one",
      classTab:'1',
      code:""
    }
  },
   mounted(){
     this.getShopTypeList()
     this.getSchoolList()
  },
  methods:{
   getMessage(){
     if(this.showMess==true){
          this.showMess=false 
          
     }else{
          this.showMess=true
     }
    
   },
   closeMea(){
     this.showMess=false 
     this.checked = true
   },
    surePass(rule, value, callback){  //确认密码
        if (value === '') {
              callback(new Error('请重复密码'));
              return false;
            } else {
               if(value!=this.ruleForm.password){
                    callback(new Error('重复密码不正确'));
                    return false;
                }
                 callback();
                return true;
               }
    },
    sureCode(rule, value, callback){
         if (value === '') {
              callback(new Error('请输入验证码'));
              return false;
            } else {
               if(value!=this.code){
                    callback(new Error('验证码错误，请填写正确验证码'));
                    return false;
                }
                 callback();
                return true;
               }
    },
    setValue1(value){
         this.ruleForm3.cardFrontImg="";
            if(value){

                this.ruleForm3.cardFrontImg=this.$host+value;
            }
     },
      setValue2(value){
         this.ruleForm3.cardBackImg="";
        if(value){
              this.ruleForm3.cardBackImg= Vue.prototype.$host + value;
          }
     },
      setValue3(value){
        this.ruleForm3.cardHanderImg="";
     
        if(value){
                    this.ruleForm3.cardHanderImg= Vue.prototype.$host + value;
            }
     },
      setValue4(value){
    
        this.ruleForm3.businessLicense="";
        if(value){
          this.ruleForm3.businessLicense= Vue.prototype.$host + value;
        }
     },
     getShopTypeList(){    //获取店铺类型
       var _self = this;
       	this.$axios.post("/device/shopType/list" ,{}).then(function (res) {
           console.log(res)
              _self.shopList=res.data.data.list
					})
     },
     getSchoolList(){
        var _self = this;
        var data={
           pageNumber: 1,
           pageSize: 10,

        }
       this.$axios.post("/device/school/list" ,data).then(function (res) {
         console.log(res)
            _self.schoolList=res.data.data.list
					})
     },
     getCode(){  //获取杨正码
       // let isPhone=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
       let isPhone=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(17[5-8])|(18([0-3]|[5-9])))\d{8}$/
       let phone=this.ruleForm.phone
       if(!isPhone.test(phone)){
         $.tooltip("请输入正确的手机号码", 3000);
         return;
       }else{
          var self = this;
           let data={
             phone:this.ruleForm.phone
           }
          this.$axios.post("/device/SMSCloud/SendOut",data).then((res) => {
             console.log(res)
            if(res.data.code==1000){
                self.valicodeIsDisable=true;
                self.validtime=60;
                this.code=res.data.data
                self.valicodetext="剩余"+self.validtime+"s";
                window.interVali=setInterval(self.stimer,1000);
                $.tooltip("发送成功",3000,true);
            }else{
                $.tooltip(res.data.message,3000);
                clearInterval(window.interVali);
                self.valicodeIsDisable=false;
                self.valicodetext="发送验证码";
           }
        })
       }
     },
      stimer(){
            var self=this;
            self.valicodetext="剩余"+self.validtime+"s";
            self.validtime=self.validtime-1;
            if(self.validtime<0){
                self.valicodeIsDisable=false;
                clearInterval(window.interVali);
                self.valicodetext="发送验证码";
            }
        },
     submitFormOne(ruleForm){   //第一步
       this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.status='two'
            // this.submitFlag = true
          } else {
            console.log('error submit!!');
            return false;
          }
        });
     },
     submitFormTwo(ruleForm){
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.status='three'
          } else {
            console.log('error submit!!');
            return false;
          }
        });
     },
     submitFormThree(ruleForm){
       var _self=this
            this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            if(_self.submitFlag){
              _self.saveApply()
            }else{
              this.$message({
                message: '请不要重复提交',
                type: 'warning'
              });
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
     },
     saveApply(){
       this.submitFlag = false
       var data={
        shopName:this.ruleForm.shop_name,  //店铺名
        shopType:this.ruleForm.shop_type,  //店铺类型
        email:this.ruleForm.email,      //邮箱
        phone:this.ruleForm.phone,      //手机号码
        checkData:this.ruleForm.checkData, //验证码
        password:this.ruleForm.password,    //密码
        username:this.ruleForm2.realName,   //店主名字
        majorBusiness:this.ruleForm2.majorBusiness,  //主营业务   
        cardId:this.ruleForm2.cardNum,
        schoolId:this.ruleForm2.schoolId,
        cardFrontImg:this.ruleForm3.cardFrontImg,  
        cardBackImg:this.ruleForm3.cardBackImg,  
        cardHanderImg:this.ruleForm3.cardHanderImg,
        businessLicense:this.ruleForm3.businessLicense,
       }
       console.log(data)
       this.$axios.post("/device/shopApply/saveShopApply",data).then((res) => {
           console.log(res)
           if(res.data.code=="1013"){
            this.$message({
                      message: '信息错误，请重新填写申请',
                      type: 'warning'
                    });
           }else if(res.data.code=="1014"){
             this.$message({
                message: '验证码错误',
                type: 'warning'
              });
           }else if(res.data.code=="1019"){
             this.$message({
                message: '该学校已存在学校管理员',
                type: 'warning'
              });
           }
           else{
              this.IMregister(this.ruleForm.phone,'123456',this.ruleForm2.realName)
              this.$message({
                message: '恭喜你，注册成功，请等待客服审核，我们会在3天之内审核完毕',
                type: 'success'
              });
              this.$router.go(-1)
           }
				})
     },
      IMregister(username,pwd,nickname) {
        var option = {
          username: username,
          password: pwd,
          nickname: nickname,
          appKey: this.$WebIM.config.appkey,
          success: function () {
              // alert('regist success!');
              console.log('regist success!');
          },
          error: function () {
              // alert('regist error');
              console.log('regist error');
          },
          apiUrl: this.$WebIM.config.apiURL
        };
        this.$imConn.registerUser(option);
      },
  }
}
</script>
<style scoped>
.inpFile{
   position:absolute;
   left: 0px;
   right: 0px;
   top: 0px;
   opacity: 0;
   filter: Alpha(opacity=0);
   z-index: 2;
   height:100%;
   width:100%;
}
.imgpo{
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
  right: 0;
  width: 100%;
  border: none;
}
.imgbox{
  line-height:120px;
  color:#bfcbd9;
  height: 180px;
  width: 306px;
  position: relative;
}
.from-one{
  display: none;
}
  .cotainer{
    /* height: 100%; */
    height: auto;
    width:100%;
    background: url(../../../assets/register-back.jpg) no-repeat ;
    background-size:100% 100%; 
    padding-top: 50px;
    padding-bottom: 50px;
    /* overflow: hidden; */
  }
  .from-box{
     width:400px;
     padding-top:60px;
     margin:0 auto;
  }
 .from-boximg{
   width:700px;
  padding-top:50px;
   margin:0 auto;
   padding-bottom: 20px;
 }
 .fromImg{
   float:left;
   margin: 0px 20px;
 }
  .box{
    width: 886px;
    background: #fff;
    height: 672px;
    margin: 0 auto;
    border-radius: 10px;
  }
  #logo{
    padding-bottom:10px;
    line-height: 50px;
    font-size: 14px;
    color: #444444;
    text-align: center;
  }
  .title{
    height: 60px;
    line-height: 60px;
    padding-left:30px;
    color:#00d1b2;
    font-size:24px;
  }
  .steps{
    width: 500px;
   
    margin:0 auto;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    line-height: 32px;
    display: flex;
    height: 32px;
  }
  .step{
    flex: 1;
    text-align: center;
  }
  .select-x{
    padding-top:4px;
    padding-bottom: 16px;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
  }
  .butn{
    float: right;
    width:100px;
    background:#00d1b2;
    color: #fff;
    margin-left:40px;
    border-radius: 4px;
    text-align: center;
  }
  .next{
    background:#00d1b2;
    color: #fff;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    height: 36px;
    line-height: 36px;
  }
  .active{
    line-height: 30px;
    padding-bottom: 6px;
    border-bottom: 2px solid#00d1b2;
    color:#00d1b2;
  }
  .code{
    width:160px;
      -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
      border: 1px solid rgb(191, 217, 216);
    box-sizing: border-box;
    color: rgb(31, 61, 60);
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
</style>

